<% 
  var headContent = {
%>
<!-- //这里包含需要引入的其他css/js文件 -->

<style>
 /*验证：提示信息样式 begin*/
 .am-alert-danger {
    background-color: transparent;
    border-color: transparent;
    color: red;
  }
  .am-alert {
    margin-bottom: 1em;
    padding: .625em;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  /*验证：提示信息样式 end*/
</style>
<%};%>
<%layout("/common/_layout.html",{head:headContent}){%>


  <div  class="am-tabs am-margin">
  
          <ul class="am-tabs-nav am-nav am-nav-tabs">
          <li class="am-active"><a id="title" name="title" href="#tab1"> 预估酬金详情</a>                 
          </li>
  
          </ul>

        <div class="am-tabs-bd">
        <form class="am-form" id="rewardForm" action="${base}/reward/update" method="post">
	         <div class="am-tab-panel am-fade am-in am-active" id="tab1">

	          
	          <div class=" am-g am-margin-top am-form-group">
                <div class="am-u-sm-2 am-u-md-2 " style="text-align: right;">
                                                            分公司名称
                </div>
                <div class="am-u-sm-4 am-u-md-4" style="text-align: left;">
                  <select id="org_id" name="org_id" data-am-selected="{btnSize: 'sm', maxHeight: 200}" style="height:24rem;overflow-y:auto">
                  <%for(list in org!){%>
                  <option value="${list.id}"
                  <%if (org_id==list.id){%>
                    selected = "selected"                                                    
                    <%}%> 
                  >${list.DisplayName}</option>
                  <%}%> 
                  </select>
                  
                </div>
                 <div class="am-hide-sm-only am-u-md-1" style="color:red ; text-align: left;">*</div>
                <div class="am-u-sm-2 am-u-md-5 input-msg" >
                  <div class="am-alert am-alert-danger">${orgMessages!}</div>
                </div>  
              </div>
	          
	          
		       <div class=" am-g am-margin-top am-form-group">
		                 
                <div class="am-u-sm-2 am-u-md-2 " style="text-align: right;">
                 	 业务名称
                </div>
                <div class="am-u-sm-4 am-u-md-4" style="text-align: left;">
                
                
                  <select id="business_id" name="business_id" data-am-selected="{btnSize: 'sm', maxHeight: 200}" style="height:24rem;overflow-y:auto">
                  <%for(list in busi!){%>                                 
                  <option value="${list.id}" 
                    <%if (business_id==list.id){%>
                    selected = "selected"                                                    
                    <%}%> 
                   >${list.businessCode}(${list.businessName})</option>
                  <%}%> 
                  </select>
                </div>
                <div class="am-hide-sm-only am-u-md-6" style="color:red;">*</div>
                
              </div>
             
               <div class=" am-g am-margin-top am-form-group">
            
                <div class="am-u-sm-2 am-u-md-2 " style="text-align: right;">
                 	 首单结酬标准
                </div>
                <div class="am-u-sm-4 am-u-md-4" >
                  <input type="text" class="am-input-sm js-pattern-first_remuneration" value="${first_remuneration!}" name="first_remuneration" id="first_remuneration" placeholder="首单结酬标准" data-validation-message="请输入首单结酬标准(单位:元)" required/>
                </div>
                 <div class="am-hide-sm-only am-u-md-1" style="color:red;">*</div>
                <div class="am-u-sm-2 am-u-md-5 input-msg" >
                    <div class="am-alert am-alert-danger">${firstMessages!}</div>
                </div>  
            
              </div>
              
              <div class=" am-g am-margin-top am-form-group">
            
                <div class="am-u-sm-2 am-u-md-2 " style="text-align: right;">
                                                             正常结酬标准
                </div>
                <div class="am-u-sm-4 am-u-md-4">
                 <input type="text" class="am-input-sm js-pattern-normal_remuneration" value="${normal_remuneration!}" name="normal_remuneration" id="normal_remuneration" placeholder="正常结酬标准(特殊说明：首单之后的标准)" data-validation-message="请输入正常结酬标准(单位:元)" required/>
                </div>
                 <div class="am-hide-sm-only am-u-md-1" style="color:red;">*</div>
     
                <div class="am-u-sm-2 am-u-md-5 input-msg" >
                  <div class="am-alert am-alert-danger">${normalMessages!}</div>
                </div>  
             
              </div>
              
              <div class=" am-g am-margin-top am-form-group">
            
                <div class="am-u-sm-2 am-u-md-2 " style="text-align: right;">
                                                             单项封顶
                </div>
                <div class="am-u-sm-4 am-u-md-4">
                 <input type="text" class="am-input-sm" value="${single_cap!}" name="single_cap" id="single_cap" placeholder="单项封顶(特殊说明：为空则不封顶)" data-validation-message="请输入单项封顶标准(单位:元)"/>
                </div>
               <div class="am-hide-sm-only am-u-md-1" style="color:red;"></div>
                <div class="am-u-sm-2 am-u-md-5 input-msg" >
                 <div class="am-alert am-alert-danger">${singleMessages!}</div>
                </div>  
             
              </div>
              
              <div class=" am-g am-margin-top am-form-group">
             
                <div class="am-u-sm-2 am-u-md-2 " style="text-align: right;">
                                                             是否启用
                </div>
                <div class="am-u-sm-4 am-u-md-4 switch-button">
                 <input id="switch"  name="switch" type="checkbox" data-size='xs' data-am-switch  data-off-text="已禁用" data-on-text="已启用"
                 <%if (enabled==true){%>
                    checked                                                        
                 <%}%>
                 >
                   <input type="hidden" class="am-input-sm" name="enabled" id="enabled" value="${enabled}"/>
                   <input type="hidden" class="am-input-sm" name="edit" id="edit" value="${edit}"/>
                   <input type="hidden" class="am-input-sm" name="id" id="id" value="${id}"/>
                </div>
                  <div class="am-hide-sm-only am-u-md-1" style="color:red;">*</div>
                <div class="am-u-sm-2 am-u-md-5 input-msg" >
                 
                </div>  
             
              </div>
              
               <div class=" am-g am-margin-top am-form-group">
             
                <div class="am-u-sm-2 am-u-md-2 " style="text-align: right;">
                                                            适用渠道类型
                </div>
                <div class="am-u-sm-4 am-u-md-2">
                  <input type="text" class="am-input-sm"  value="${channel_typeid_temp!}" name="channel_typeid_temp" id="channel_typeid_temp" placeholder="选择渠道类型" data-validation-message="选择渠道类型" required/>
                   <input type="hidden" class="am-input-sm"  value="${channel_typeid!}" name="channel_typeid" id="channel_typeid"/>
                </div>
       
                 <div class="am-u-sm-12 am-u-md-2">
                 	<button id="searchChannel" type="button" class="am-btn am-btn-primary am-btn-xs">搜索</button>
                 </div>
                 <div class="am-hide-sm-only am-u-md-1" style="color:red;">*</div>
                <div class="am-u-sm-2 am-u-md-5 input-msg" >
                 <div class="am-alert am-alert-danger">${websiteMessages!}</div>
                </div>  
              
              </div>
              
              <div id="webList" class="am-g" >
               <div class="am-u-sm-2 am-u-md-2 " style="text-align: right;" >
                                                                                     选择渠道类型
               </div>  
               <div class="am-u-sm-6 am-u-md-6 " style="width:40rem;height:24rem;overflow-y:auto" >
               
			       <table class="am-table am-table-striped am-table-hover table-main">
				       <thead>
		                 <tr>
		                     <th class="table-check"><input type="checkbox"  id="allCheck" /></th><th class="table-title">渠道类型id</th><th class="table-title">渠道类型名称</th>
		                 </tr>
	                  </thead>
			          <tbody>
			             <%for(list in channel!){%>
			                <tr>
			                 <td><input type="checkbox" name="ids" value="${list.WebsiteId}_${list.id}"
			                  <%if (strutil.contain(channel_typeid,list.id+"")){%>
				                   checked="checked"                                                      
				              <%}%>
			                 ></td>
			                 <td>${list.WebsiteId!}</td>
			                 <td>${list.class_name!}</td>
			               </tr>
			             <%}%> 
			          </tbody>
			       </table>
			    </div> 
			    <div class="am-u-sm-4 am-u-md-4 " >
			    
			   
               </div>  
              </div>
              
              
              <div class="am-g">
		      <button type="submit" class="am-btn am-btn-primary am-btn-xs" >提交保存</button>
		      <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="javascript: History.back();">返回上一级</button>
		    </div>
              </form> 
	    </div>
	         
	    
        </div>
        </form>
        </div>

  <script type="text/javascript">
 
  $(function(){
  
	  $("#choice").on('click',function(event) {
          $("#webList").toggle();
      });
	
	 var check = function(){
	 	  /*这是以前#selectChannel选择按钮的点击事件代码，重用*/
		  var $idsCheckedCheck = $("[name='ids']:checked");
          var ids = $idsCheckedCheck.serialize();
          var name=ids.split("&");
          console.log(ids);
          var id="";
          var websiteid="";
          var temp;
          for (i=0;i<name.length ;i++ ) 
          { 
        	  temp = name[i].substring(4).split("_")
        	  id+="/"+temp[0];
        	  websiteid+="/"+temp[1];
          }
          $("#channel_typeid_temp").val(id.substring(1));
          $("#channel_typeid").val(websiteid.substring(1));
          console.log($("#channel_typeid_temp").val());
          console.log($("#channel_typeid").val());
	 }
	  /*去掉以前按钮点击之后选择，现在是每个checkbox的点击都能反应到输入框中*/
      $("[name='ids']:checkbox").click(function(){
      	  check(); 
      });
      $("#allCheck").click(function(){
      	  check();
      });
      
      /*搜索按钮*/
      $("#searchChannel").click(function(){
      	  //1.获取搜索条件
      	  var searchBy = $("#channel_typeid_temp").val();
      	  console.info(searchBy);
      	  //2.发起请求
      	  $.getJSON("../reward/getWebsiteBy",{ searchBy:searchBy},function(result){
      	  		//3.清空原来的列表数据
	      	  	$(".table-main tbody").empty();
      	  		if(result.length==0){
      	  			$(".table-main tbody").append($("<tr><td colspan='3'>没有找到任何结果，请改变搜索条件</td></tr>"));
      	  		}else{
	      	  		//4.添加json中的数据
	      	  		$.each(result, function(i, field){
	      				console.info(i+"----"+field.WebsiteId+"----"+field.class_name);
	      				//生成checkbox
	      				var tdCheckbox = "<td><input type='checkbox' name='ids' value='"+field.WebsiteId+"_"+field.id+"'"+"/></td>";
	      				//生成一个tr表格行
	      				$("<tr></tr>").append($(tdCheckbox))
	      							  .append("<td>"+field.WebsiteId+"</td>")
	      							  .append("<td>"+field.class_name+"</td>")
	      							  .appendTo($(".table-main tbody"));//添加到tbody里面
	    			});
	    			//这里非常重要，需要重新绑定这个事件，否则点击无效
	    			$("[name='ids']:checkbox").click(function(){
	      	  			check(); 
	      			});
      	  		}
      	  });
      });
      
      
      
        
	  var $mycheckbox = $('.switch-button');
      $mycheckbox.each(function(){
         
       
          $("#switch").on({
              'switchChange.bootstrapSwitch': function(event, state) {
            	  if(state.toString()=="true"){
                      $("#enabled").val("true");
                  }else{
                      $("#enabled").val("false");
                  }
            	  console.log($("#enabled").val());
              }
          });
      });

      
	  /*表单验证：begin*/
      //自定义规则，用法：验证元素上加class="js-pattern-sort"
      if ($.AMUI && $.AMUI.validator) {
        $.AMUI.validator.patterns.first_remuneration = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
        $.AMUI.validator.patterns.normal_remuneration = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
        
      }
      
      $("#rewardForm").validator({
        // 域通过验证时回调
        onValid: function(validity) {
          $(validity.field).closest('.am-form-group').find('.am-alert').hide();
        },
        // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
        onInValid: function(validity) {
        	
          var $field = $(validity.field);
          var $group = $field.closest('.am-form-group');
          var $alert = $group.find('.am-alert');
          // 使用自定义的提示信息 或 插件内置的提示信息
          var msg = $field.data('validationMessage') || this.getValidationMessage(validity);
  
          if (!$alert.length) {
            $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
            appendTo($group.find(".input-msg"));
          }
          console.log("onInValid : "+$field.val());
          $alert.html(msg).show();
        }
      });
      /*表单验证：end*/
            
  });
  </script>
<%}%>